import React, { useState, useEffect } from 'react';
import { Base } from '../base';
import { get_path } from 'base/ctl/base';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { InClient } from './in/view';
import { Sbtn } from '../stock/ctl';
import { OutView } from './out/view';
import { PickView } from './pick/view';

const ClientView = ({ wsn, line }) => {
    const [fin, setFin] = useState();

    useEffect(() => {
        setFin(null);
    }, []);

    if (fin === "out") {
        return <OutView hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "in") {
        return <InClient hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    } else if (fin === "pick") {
        return <PickView hreturn={() => setFin(null)} line={line} wsn={wsn} return={() => setFin("")}/>;
    }

    const hAction = (tp) => {
        setFin(tp);
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <Title label="成品库管理" width="w-56"/>
                <Time className="text-2xl"/>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-blue-700 text-2xl text-white py-2 pl-4">成品入库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="blue" label="入库" hcmd={() => hAction("in")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-teal-700 text-2xl text-white py-2 pl-4">找成品轴承</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="teal" label="查找" hcmd={() => hAction("pick")}/>
                </div>
            </div>
            <div className="bg-white flex flex-col mr-2 mt-8">
                <div className="bg-green-700 text-2xl text-white py-2 pl-4">成品出库</div>
                <div className="inline-flex my-4">
                    <Sbtn cl="green" label="出库" hcmd={() => hAction("out")}/>
                </div>
            </div>
        </div>
    );
};

const GoodsClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);

    return (
        <Base wsn={wsn} line={line}>
            <ClientView wsn={wsn} line={line}/>
        </Base>
    );
};

export {GoodsClient};
